<template>
  <div>
    <el-card>
      <template #header>
        <div class="card-header">
          <span>{{ $t('viewNotification') }}</span>
        </div>
      </template>
      
      <el-table :data="notifications" style="width: 100%" border>
        <el-table-column prop="id" :label="$t('notificationId')" width="80" />
        <el-table-column prop="title" :label="$t('notificationTitle')" min-width="200" />
        <el-table-column prop="content" :label="$t('notificationContent')" min-width="300" />
        <el-table-column prop="target" :label="$t('targetAudience')" width="120">
          <template #default="scope">
            <el-tag :type="getTargetType(scope.row.target)">
              {{ getTargetText(scope.row.target) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" :label="$t('creationTime')" width="180" />
        <el-table-column :label="$t('operations')" width="150">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.row)">
              {{ $t('edit') }}
            </el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.row)">
              {{ $t('delete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { ElMessage, ElMessageBox } from 'element-plus';

const { t } = useI18n();

const notifications = ref([
  {
    id: 1,
    title: '系统维护通知',
    content: '系统将于今晚22:00-24:00进行维护，请提前做好准备。',
    target: 'all',
    createTime: '2025-01-15 10:00:00'
  },
  {
    id: 2,
    title: '志愿者培训通知',
    content: '本周六上午9:00将举行志愿者培训，请准时参加。',
    target: 'volunteer',
    createTime: '2025-01-14 15:30:00'
  }
]);

const getTargetType = (target) => {
  const types = {
    all: '',
    volunteer: 'success',
    elderly: 'warning'
  };
  return types[target] || '';
};

const getTargetText = (target) => {
  const texts = {
    all: t('allUsers'),
    volunteer: t('volunteers'),
    elderly: t('elderly')
  };
  return texts[target] || target;
};

const handleEdit = (row) => {
  ElMessage.info(t('editFunction') + t('underDevelopment'));
};

const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(
      t('confirmDeleteNotification'),
      t('warning'),
      {
        confirmButtonText: t('confirm'),
        cancelButtonText: t('cancel'),
        type: 'warning',
      }
    );
    
    const index = notifications.value.findIndex(item => item.id === row.id);
    if (index > -1) {
      notifications.value.splice(index, 1);
      ElMessage.success(t('deleteSuccessful'));
    }
  } catch {
    ElMessage.info(t('deleteCancel'));
  }
};

onMounted(() => {
  // 这里可以添加获取通知列表的逻辑
});
</script>

<style scoped>
.notify-select {
  padding: 20px;
}

.card-header {
  font-weight: bold;
  font-size: 16px;
}
</style>
